<template>
  <el-dialog :visible="visible" width="360px" :before-close="close">
    <div class="container">
      <div class="title">会员登录</div>
      <div class="lable">
        <ul>
          <li
            class="changeHanld"
            v-for="(item, index) in switchover"
            :key="index"
            :class="currenIndex == index ? 'active' : ''"
            @click="tabCheck(index)"
          >{{ item }}</li>
        </ul>
      </div>
      <div class="login-content" v-if="currenIndex === 0">
        <div class="login-item flex">
          <span>手机号码</span>
          <input type="text" placeholder="请输入手机号码" v-model="userInfo.phoneNumber" />
        </div>
        <div class="login-item flex space-between items-middle">
          <input type="text" placeholder="短信验证码" v-model="userInfo.code" />
          <div class="code" v-if="showCode" @click="getCode">获取验证码</div>
          <div class="code" v-if="!showCode">{{ val }}秒后重新发送</div>
        </div>
        <div class="login-btn" @click="goLogin">登录/注册</div>
      </div>
      <div class="login-content" v-if="currenIndex === 1">
        <div class="login-item flex">
          <input type="text" placeholder="请输入手机号码" />
        </div>
        <div class="login-item flex">
          <input type="text" placeholder="请输入密码" />
        </div>
        <div class="check">
          <input class="input" type="checkbox" />记住我
        </div>
        <div class="login-btn" @click="goPassLogin">立刻登录</div>
        <div class="register flex space-between items-middle">
          <div class="register-btn" @click="$router.push('/register')">立刻注册</div>
          <div class="forget" @click="$router.push('/forget')">忘记密码</div>
        </div>
      </div>

      <!-- <loginCode v-show="isLogin" :isLogin="isLogin" @isShowCode="changeShow" /> -->
    </div>
    <div class="bottom-btn flex items-middle">
      <span>第三方登录</span>
      <img class="changeHanld" src="../../../static/image/login/wechat.png" @click="scanLogin" />
    </div>
  </el-dialog>
</template>

<script>
// import loginCode from "../../components/login_item/loginCode.vue";
import { commonRequest, postRequest } from "../../api/api.js";
import { mapActions, mapMutations } from "vuex";
import { isMobile } from "../../util/validate.js";
export default {
  components: {
    // loginCode
  },
  data() {
    return {
      // 验证码登录
      userInfo: {
        password: "",
        phoneNumber: "",
        code: ""
      },
      showCode: true,
      erruserName: false,
      errPwd: false,
      isShowdislog: false,
      val: 60,
      currenIndex: 0,
      switchover: ["快捷登录", "密码登录"],
      visible: false
    };
  },
  methods: {
    ...mapActions(["hanldCodeLogin", "handleLogin"]), // 登录方法

    open() {
      this.visible = true;
    },
    close() {
      this.visible = false;
      this.userInfo.password = "";
      this.userInfo.phoneNumber = "";
      this.userInfo.code = "";
      this.currenIndex = 0;
    },
    tabCheck(index) {
      this.currenIndex = index;
      this.userInfo.password = "";
      this.userInfo.phoneNumber = "";
      this.userInfo.code = "";
    },
    // 点击倒计时
    getCode() {
      if (this.userInfo.phoneNumber == "") {
        this.showCode = true;
        this.$message({
          type: "warning",
          message: "请输入手机您的号码"
        });
        return;
      }
      let times = null;
      this.showCode = false;
      this.getphoneCode();
      times = setInterval(() => {
        this.val--;
        if (this.val == 0) {
          this.val = 60;
          this.showCode = true;
          clearInterval(times);
        }
      }, 1000);
    },
    // 获取验证码
    getphoneCode() {
      commonRequest(
        "/api/ums/umsUsers/sendVerificationCode?type=Login&phoneNumber=" +
          this.userInfo.phoneNumber
      ).then(res => {
        if (res == "成功!") {
          this.$message({
            type: "success",
            message: "发送成功,请注意查收"
          });
        } else {
          this.$message({
            type: "warning",
            message: "发送失败,请重试"
          });
        }
      });
    },
    // 验证码登录
    goLogin() {
      let params = {};
      if (this.currenIndex === 0) {
        if (this.userInfo.phoneNumber === "" || this.userInfo.code === "") {
          this.$message({
            type: "warning",
            message: "请输入手机您的号码或验证码"
          });
          return;
        }
        if (!isMobile(this.userInfo.phoneNumber)) {
          this.$message({ type: "warning", message: "请输入正确的手机号码" });
          return;
        }
        params = {
          phoneNumber: this.userInfo.phoneNumber,
          code: this.userInfo.code
        };
        this.hanldCodeLogin(params).then(res => {
          if (!res) {
            let startTime = +new Date();
            let endTime = "";
            endTime = startTime + 24 * 60 * 60 * 1000 * 6; // 保留一天;
            localStorage.setItem("endTime", endTime);
            this.close();
            this.$emit("reload");
          } else {
            this.$message({
              message: res.message,
              type: "warning"
            });
          }
        });
      } else {
        if (this.userInfo.phoneNumber === "" || this.userInfo.password === "") {
          this.$message({
            type: "warning",
            message: "请输入手机您的号码或密码"
          });
          return;
        }
        if (!isMobile(this.userInfo.phoneNumber)) {
          this.$message({ type: "warning", message: "请输入正确的手机号码" });
          return;
        }
        params = {
          phoneNumber: this.userInfo.phoneNumber,
          password: this.userInfo.password
        };
        this.hanldCodeLogin(params).then(res => {
          if (!res) {
            let startTime = +new Date();
            let endTime = "";
            endTime = startTime + 24 * 60 * 60 * 1000 * 6; // 保留一天;
            localStorage.setItem("endTime", endTime);
            this.close();
            this.$emit("reload");
          } else {
            this.$message({
              message: res.message,
              type: "warning"
            });
          }
        });
      }
    },
    scanLogin() {}
  }
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  padding: 30px;
  box-sizing: border-box;
  .title {
    width: 100%;
    text-align: center;
    color: #44a2ff;
    font-size: 20px;
  }
  .lable {
    ul {
      display: flex;
      height: 80px;
      align-items: center;
      justify-content: space-around;
      li {
        position: relative;
        color: #9fa19f;
        font-size: 18px;
        &.active {
          color: #44a2ff;
          &::before {
            position: absolute;
            left: 0;
            bottom: -12px;
            border-radius: 2px;
            content: "";
            width: 70px;
            height: 3px;
            background-color: #44a2ff;
          }
        }
      }
    }
  }
  .login-content {
    width: 100%;
    box-sizing: border-box;
    .login-item {
      border-bottom: 1px solid #ccc;
      padding: 15px 0;
      input {
        font-size: 16px;
      }
      span {
        font-size: 14px;
        margin-right: 10px;
      }
      .code {
        color: #44a2ff;
        cursor: pointer;
        min-width: 100px;
      }
    }
    .check {
      display: flex;
      margin-top: 10px;
      align-items: center;
      .input {
        margin-right: 10px;
      }
    }
    .login-btn {
      width: 100%;
      margin-top: 30px;
      height: 40px;
      line-height: 40px;
      font-size: 16px;
      text-align: center;
      font-weight: 700;
      border-radius: 6px;
      background-color: #44a2ff;
      color: #fff;
    }
    .register {
      margin-top: 10px;
      .forget {
        color: #ccc;
      }
    }
  }
}
.bottom-btn {
  padding: 30px;
  background-size: 100% 100%;
  background-image: url("../../../static/image/login/banner3.png");
  color: #44a2ff;
  img {
    width: 20px;
    height: 16px;
    margin: 0 15px;
  }
}
</style>
